<template>
  <div class="json-server-test">
    <FCButton @click="handleGetListsJsonServer">获取数据</FCButton>
    <FCButton @click="handleAddListsJsonServer">新增</FCButton>
    <FCButton @click="handleDeleteData">删除</FCButton>
    <FCButton @click="handleEditPutData">编辑-覆盖</FCButton>
    <FCButton @click="handleEditPatchData">编辑-更新</FCButton>
    <FCTable
      :scroll="tableDataSet?.datas?.length > 0 ? { x: '100%'} : { x: '100%'} "
      :fields="tableFields"
      :dataset="tableDataSet"
      :customRow="customRow"
      shouldPagination
      :rowKey="rowKey"
      :loading="loadingTable"
    />
  </div>
</template>

<script>
import axios from 'axios'
import FCDataset from '@/vendors/fc-dataset/FCDataset'
import FCTable from '@/vendors/fc-ui/src/table/FCTable.vue'
import FCButton from '@/vendors/fc-ui/src/controls/FCButton.vue'

import {
  getListsJsonServer,
  getListsInfoJsonServer,
  getAllDataJsonServer,
  addListsJsonServer,
} from '@/apis/jsonServerTestApi'
import {
  drp_paymentstatus,
  drop_fastflag,
  drp_currency,
  drop_payway,
  drop_domestic,
  drp_type,
} from '@/pages/paymentApplicationFormPay/data'

export default {
  name: 'jsonServerTest',
  components: {
    FCDataset,
    FCTable,
    FCButton,
  },
  data() {
    const tableDataSet = new FCDataset({
      fields: [
        { name: 'payway', type: 'string' },
        { name: 'id', type: 'string' },
        { name: 'summaryno', type: 'string' },
        { name: 'exchangecurrencycode', type: 'string' },
        { name: 'exchangeamount', type: 'number' },
        { name: 'currencycode', type: 'string' },
        { name: 'amount', type: 'number' },
        { name: 'operatetime', type: 'string' },
        { name: 'customercode', type: 'string' },
        { name: 'customername', type: 'string' },
        { name: 'paymentstatus', type: 'string' },
        { name: 'operratorname', type: 'string' },
        { name: 'fastflag', type: 'string' },
        { name: 'tabperiod', type: 'string' },
        { name: 'memo', type: 'string' },
        { name: 'paymenttime', type: 'date' },
        { name: 'in_amount', type: 'string' },
        { name: 'in_currency', type: 'string' },
        { name: 'paymentmode', type: 'string' },
        { name: 'viewPDF', type: 'string' },
        { name: 'accountname', type: 'string' },
        { name: 'inpaymentmethod', type: 'string' },
        { name: 'custaccountno', type: 'string' },
        { name: 'custbankno', type: 'string' },
        { name: 'bankname', type: 'string' },
        { name: 'bankprovince', type: 'string' },
        { name: 'bankcity', type: 'string' },
        { name: 'exchangeflag', type: 'string' },
        { name: 'exchangerate', type: 'string' },
        { name: 'bankaccountno', type: 'string' },
      ],
      datas: [],
    })
    return {
      url: 'http://127.0.0.1:3000/lists',
      nowRecord: {},
      loadingTable: false,
      rowKey: 'id',
      tableDataSet,
      tableFields: [
        {
          title: '申请单类型',
          name: 'payway',
          width: 160,
          ellipsis: true,
          customRender: (text) => {
            return (
              drop_payway.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '划拨申请单号',
          name: 'id',
          width: 200,
          ellipsis: true,
        },
        {
          title: '申请单编号',
          name: 'summaryno',
          width: 200,
          ellipsis: true,
          controlType: 'button',
          controlProps: {
            type: 'link',
            onClick: () => {
              this.getListsInfoJsonServer()
            },
          },
        },
        {
          title: '应付币种',
          name: 'exchangecurrencycode',
          width: 160,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_currency.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '应付金额',
          name: 'exchangeamount',
          width: 160,
          ellipsis: true,
        },
        {
          title: '折币币种',
          name: 'currencycode',
          width: 160,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_currency.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '折币金额',
          name: 'amount',
          width: 160,
          ellipsis: true,
        },
        {
          title: '申请单递交日期',
          name: 'operatetime',
          width: 160,
          ellipsis: true,
        },
        {
          title: '再保人ID',
          name: 'customercode',
          width: 200,
          ellipsis: true,
        },
        {
          title: '再保人',
          name: 'customername',
          width: 160,
          ellipsis: true,
        },
        {
          title: '申请单状态',
          name: 'paymentstatus',
          width: 160,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_paymentstatus.filter((item) => item.value == text)[0]
                ?.label || '未知'
            )
          },
        },
        {
          title: '申请人',
          name: 'operratorname',
          width: 160,
          ellipsis: true,
        },
        {
          title: '加急件',
          name: 'fastflag',
          width: 80,
          ellipsis: true,
          customRender: (text) => {
            return (
              drop_fastflag.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '查看PDF',
          name: 'viewPDF',
          width: 100,
          ellipsis: true,
          controlType: 'button',
          controlProps: {
            type: 'link',
            onClick: () => {
              this.handleOpenPDF()
            },
          },
        },
        {
          title: '账期',
          name: 'tabperiod',
          width: 160,
          ellipsis: true,
        },
        {
          title: '支付备注信息',
          name: 'memo',
          width: 160,
          ellipsis: true,
        },
        {
          title: '实际付款日期',
          name: 'paymenttime',
          width: 160,
          ellipsis: true,
        },
        {
          title: '付款金额',
          name: 'in_amount',
          width: 160,
          ellipsis: true,
        },
        {
          title: '付款币种',
          name: 'in_currency',
          width: 160,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_currency.filter((item) => item.value == text)[0]?.label ||
              '未知'
            )
          },
        },
        {
          title: '支付方式',
          name: 'paymentmode',
          width: 160,
          ellipsis: true,
          customRender: (text) => {
            return (
              drp_type.filter((item) => item.value == text)[0]?.label || '未知'
            )
          },
        },
      ],
    }
  },
  mounted() {
    // this.handleGetListsJsonServer();
  },
  methods: {
    /**编辑：
     * 修改数据有两个方法：put 覆盖和patch 更新
     */
    async handleEditPutData() {
      const params = {
        summaryno: '我是覆盖后的值' + Math.random() * 10,
        exchangecurrencycode: '我是覆盖后的值' + Math.random() * 10,
        exchangeamount: '我是覆盖后的值',
        customername: '我是覆盖后的值',
        operratorname: '我是覆盖后的值',
      }
      const res = await axios.put(this.url + `/${this.nowRecord.id}`, params)
      console.log('>>> 覆盖res', res)
      this.handleGetListsJsonServer()
    },
    async handleEditPatchData() {
      const params = {
        summaryno: '我是更新后的值' + Math.random() * 10,
        exchangecurrencycode: '我是更新后的值' + Math.random() * 10,
        exchangeamount: '我是更新后的值',
        customername: '我是更新后的值',
        operratorname: '我是更新后的值',
      }
      const res = await axios.patch(this.url + `/${this.nowRecord.id}`, params)
      console.log('>>> 覆盖res', res)
      this.handleGetListsJsonServer()
    },
    /**删除：
     * 删除成功的 Status 返回的http状态码为 200 ；
        如果要删除的数据不存在，则会返回 404
     */
    async handleDeleteData() {
      const res = await axios.delete(this.url + `/${this.nowRecord.id}`)
      console.log('>>> 删除成功', res)
      this.handleGetListsJsonServer()
    },
    async handleAddListsJsonServer() {
      const params = {
        // id: 1,
        customername: '我是新增',
        operratorname: '我是新增',
      }
      const res = await axios.post(this.url, params)
      //   const res = await addListsJsonServer(params)
      console.log('>>> 添加数据成功', res)
      this.handleGetListsJsonServer()
    },
    async handleGetListsJsonServer() {
      this.loadingTable = true
      const res = await axios.get(this.url)
      this.loadingTable = false
      console.log('>>> res', res)
      this.tableDataSet.clear()
      res.data.forEach((item) => {
        this.tableDataSet.addRecord(item)
      })
    },
    async getListsInfoJsonServer() {
      console.log('this.nowRecord:', this.nowRecord)
      const params = {
        id: this.nowRecord.id,
      }
      const res = await axios.post(this.url, params)
      console.log('>>> 详情数据：', res)
    },
    customRow(record, index) {
      return {
        style: {
          'background-color': index === this.index ? '#e6f7ff' : '',
        },
        on: {
          click: () => {
            this.index = index
            this.nowRecord = record
            this.tableDataSet.currentKey =
              this.tableDataSet.getRecordAt(index).key
          },
        },
      }
    },
  },
}
</script>